<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .box {
        width: 820px;
        height: 380px;
        margin: 50px auto;
        border: 2px solid wheat;
        position: relative;
      }
      .inner {
        width: 100%;
        height: 340px;
        display: none;
      }
      .img1 {
        display: block;
        background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/59fc14ad5433872c7255361d269b0862.jpeg)
          center center/cover no-repeat;
      }
      .img2 {
        background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241009/2fd63a8a89b7a787c48a002811549970.jpeg)
          center center/cover no-repeat;
      }
      .img3 {
        background: url(https://ossweb-img.qq.com/upload/adw/image/977/20240926/6ff9a3b91a118fd01d3027a7184ae7b4.jpeg)
          center center/cover no-repeat;
      }
      .img4 {
        background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/a930e92f486f585dbd4fd36ade1115aa.jpeg)
          center center/cover no-repeat;
      }
      .img5 {
        background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241011/f3d821ee267bd18f4e0c11582280eca5.jpeg)
          center center/cover no-repeat;
      }
      /* 导航部分 */
      .nav {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0px;
        overflow: hidden;
        background-color: #e3e2e2;
      }
      .nav > li {
        float: left;
        width: calc(100% / 5);
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
      }
      .active {
        background-color: white;
        color: rgb(187, 142, 102);
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner img1"></div>
      <div class="inner img2"></div>
      <div class="inner img3"></div>
      <div class="inner img4"></div>
      <div class="inner img5"></div>
      <ul class="nav">
        <li class="active">超级粉丝2024</li>
        <li>全球总决赛 荣耀征程</li>
        <li>T1小小奥莉安娜</li>
        <li>星守小小阿卡丽</li>
        <li>s14赛程</li>
      </ul>
    </div>
    <script>
      let Inners = document.getElementsByClassName("inner");
      let lis = document.getElementsByTagName("li");
      console.log(Inners, lis);
      for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          for (let j = 0; j < Inners.length; j++) {
            Inners[j].style.display = "none";
            lis[j].className = "";
          }
          this.className = "active";
          Inners[i].style.display = "block";
        };
      }
      // // 第三种方法
      // for (let i = 0; i < lis.length; i++) {
      //   lis[i].index = i;
      //   lis[i].onclick = function () {
      //     for (let j = 0; j < Inners.length; j++) {
      //       lis[j].className = "";
      //       Inners[j].style.display = "none";
      //     }
      //     lis[this.index].className = "active";
      //     Inners[this.index].style.display = "block";
      //   };
      // }
      //第二种方法
      // for(let i=0;i<lis.length;i++){
      // 	lis[i].onclick = function(){
      // 		for(let j=0;j<Inners.length;j++){
      // 			if(lis[j] == this){
      // 				lis[j].className = 'active'
      // 				Inners[j].style.display = 'block'
      // 			}else{
      // 				lis[j].className = ''
      // 				Inners[j].style.display = 'none'
      // 			}
      // 		}
      // 	}
      // }
      //第一种方法
      // lis[0].onclick = function(){
      // 	Inners[0].style.display = 'block';
      // 	Inners[1].style.display = 'none'
      // 	Inners[2].style.display = 'none'
      // 	Inners[3].style.display = 'none'
      // 	Inners[4].style.display = 'none'
      // 	lis[0].className = 'active'
      // 	lis[1].className = ''
      // 	lis[2].className = ''
      // 	lis[3].className = ''
      // 	lis[4].className = ''
      // }
      // lis[1].onclick = function(){
      // 	Inners[0].style.display = 'none';
      // 	Inners[1].style.display = 'block'
      // 	Inners[2].style.display = 'none'
      // 	Inners[3].style.display = 'none'
      // 	Inners[4].style.display = 'none'
      // 	lis[0].className = ''
      // 	lis[1].className = 'active'
      // 	lis[2].className = ''
      // 	lis[3].className = ''
      // 	lis[4].className = ''
      // }
      // lis[2].onclick = function(){
      // 	Inners[0].style.display = 'none';
      // 	Inners[1].style.display = 'none'
      // 	Inners[2].style.display = 'block'
      // 	Inners[3].style.display = 'none'
      // 	Inners[4].style.display = 'none'
      // 	lis[0].className = ''
      // 	lis[1].className = ''
      // 	lis[2].className = 'active'
      // 	lis[3].className = ''
      // 	lis[4].className = ''
      // }
      // lis[3].onclick = function(){
      // 	Inners[0].style.display = 'none';
      // 	Inners[1].style.display = 'none'
      // 	Inners[2].style.display = 'none'
      // 	Inners[3].style.display = 'block'
      // 	Inners[4].style.display = 'none'
      // 	lis[0].className = ''
      // 	lis[1].className = ''
      // 	lis[2].className = ''
      // 	lis[3].className = 'active'
      // 	lis[4].className = ''
      // }
      // lis[4].onclick = function(){
      // 	Inners[0].style.display = 'none';
      // 	Inners[1].style.display = 'none'
      // 	Inners[2].style.display = 'none'
      // 	Inners[3].style.display = 'none'
      // 	Inners[4].style.display = 'block'
      // 	lis[0].className = ''
      // 	lis[1].className = ''
      // 	lis[2].className = ''
      // 	lis[3].className = ''
      // 	lis[4].className = 'active'
      // }
    </script>
  </body>
</html>
